import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xuance/bean/FilterFieldBean.dart';
import 'package:xuance/constant.dart';

import 'logic.dart';

class AddFieldFilterPage extends StatelessWidget {
  const AddFieldFilterPage({super.key});

  @override
  Widget build(BuildContext context) {
    final AddFieldFilterLogic logic = Get.find<AddFieldFilterLogic>();
    final state = logic.state;
    return Scaffold(
        backgroundColor: bgColor,
        body: SafeArea(
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(children: [
                      InkWell(
                          onTap: Get.back,
                          child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Icon(Icons.arrow_back_ios_new_outlined,
                                  color: c_CCCCCF))),
                      Text("添加字段",
                          style: TextStyle(color: c_CCCCCF, fontSize: 17))
                    ]),
                    InkWell(
                        onTap: () {
                          Get.back(result: state.fields.value);
                        },
                        child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text("完成",
                                style:
                                    TextStyle(color: c_CCCCCF, fontSize: 17))))
                  ])),
          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text("已选",
                        style: TextStyle(
                            color: Colors.white, fontWeight: FontWeight.bold)),
                    const SizedBox(height: 5),
                    Obx(() {
                      return Wrap(
                          children: List.generate(state.fields.length, (i) {
                        var bean = state.fields[i];
                        return GestureDetector(
                            onTap: () {
                              state.fields.remove(bean);
                            },
                            child: Stack(children: [
                              Container(
                                  margin: const EdgeInsets.only(
                                      right: 8, top: 10, left: 5),
                                  decoration: BoxDecoration(
                                      color: c_green,
                                      borderRadius: BorderRadius.circular(5)),
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 20, vertical: 5),
                                  child: Text(bean.fieldName,
                                      style: const TextStyle(
                                          fontWeight: FontWeight.bold,
                                          color: Colors.white))),
                              Positioned(
                                  right: 0,
                                  top: 0,
                                  child: Icon(Icons.remove_circle,
                                      color: c_red, size: 20))
                            ]));
                      }));
                    }),
                    const SizedBox(height: 10),
                    const Padding(
                        padding: EdgeInsets.symmetric(vertical: 5),
                        child: Text("可选",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold))),
                    Wrap(
                        children: List.generate(state.all_fields.length, (i) {
                      var f = state.all_fields[i];
                      return GestureDetector(
                          onTap: () {
                            if (state.fields
                                .where((m) => m.fieldName == f)
                                .isEmpty) {
                              state.fields.add(FilterFieldBean(fieldName: f));
                            }
                          },
                          child: Container(
                              margin: const EdgeInsets.only(
                                  right: 8, top: 10, left: 5),
                              decoration: BoxDecoration(
                                  color: c_green,
                                  borderRadius: BorderRadius.circular(5)),
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 20, vertical: 5),
                              child: Text(f,
                                  style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white))));
                    }))
                  ]))
        ])));
  }
}
